<template>
  <div id="manage">
    <div class="condition">


      <el-date-picker v-model="searchParam.daterange" style="width: 280px;" align="center" :clearable="false"
        type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
      </el-date-picker>

      <div class="thirdInput">
        <el-select v-model="searchParam.dispatchCarId" placeholder="请选择车辆" size="small">
          <el-option v-for="item in carList" :key="item.id" :label="item.numberPlate" :value="item.id"></el-option>
        </el-select>
      </div>

      <div class="searchBtn">
        <el-button size="small" type="primary" @click="refresh()">查询</el-button>
        <el-button size="small" type="primary" @click="dataExport()">导出数据</el-button>
      </div>
    </div>
    <div class="z-pagecontent">
      <el-table :data="dataList" border stripe v-loading="dataListLoading" @selection-change="selectionChangeHandle"
        style="width: 100%;" :height="maxHeight">
        <el-table-column type="selection" header-align="center" align="center" width="50">
        </el-table-column>
        <el-table-column type="index" header-align="center" label="序号" align="center" width="50">
        </el-table-column>
        <el-table-column prop="numberPlate" header-align="center" align="center" label="车牌号" min-width="130"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="model" header-align="center" align="center" label="司机" min-width="130"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="mobile" header-align="center" align="center" label="联系方式" min-width="130"
          show-overflow-tooltip>
          <template slot-scope="scope">{{ scope.row.driver && scope.row.driver.mobile }}</template>
        </el-table-column>
        <el-table-column prop="status" header-align="center" align="center" label="收运总量" min-width="80"
          show-overflow-tooltip>
          <template slot-scope="scope">
            {{ statusMap[scope.row.status] }}
          </template>
        </el-table-column>

      </el-table>
      <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"
        :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage"
        layout="total, sizes, prev, pager, next, jumper">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { formatDate } from '@/utils/timeUtils'

export default {
  name: "carReport",
  data() {
    const now = new Date()
    const pre = new Date(now.getTime() - 3600000 * 24 * 7)
    return {
      clientHeight: document.body.clientHeight, //窗口可视区域高度
      searchParam: {
        daterange: [pre, now],
        dispatchCarId: "", //车辆
        status: 2 //人员
      },
      carList: [], //车辆list
      personList: [], //人员list
      tableMaxHeight: 0, //表格的最大高度
      curPage: 1,
      pageSize: 10,
      totalPage: 0,
      pageIndex: 1,
      dataList: [],
      dataListLoading: false,
      maxHeight: document.documentElement.clientHeight - 260,

    };
  },
  mounted() {

    this.getCarList();
    this.initCondition();
    this.refresh();
  },

  methods: {

    selectionChangeHandle() {

    },
    handleClose(done) {
      done();
    },
    getCarList() {
      this.$http({
        url: this.$http.adornUrl('/sign/signcar/list'),
        method: 'post',
        data: this.$http.adornData({
          page: 1,
          limit: -1
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.carList = data.page.list
        } else {
          this.carList = []
        }
      })
    },
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val
      this.getDataList()
    },
    // 多选
    selectionChangeHandle(val) {
      this.dataListSelections = val
    },
    //数据查询
    refresh() {
      let that = this;

      this.$http({
        url: this.$http.adornUrl('/sign/report/getTotalByCar'),
        method: 'post',
        data: this.$http.adornData({
          'startTime': formatDate(this.searchParam.daterange[0], 'yyyy-MM-dd'),
          'endTime': formatDate(this.searchParam.daterange[1], 'yyyy-MM-dd'),
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          //渲染表格数据
          that.tableData = data.list;
          // //汇总数据赋值
          // that.summaryData = res.summaryData;
        } else {
          this.tableData = []
        }
      })
    },
    //初始化查询条件
    initCondition() {
      let date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      month = month < 10 ? "0" + month : month;
      let strDate = date.getDate();
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      let curMonth = year.toString() + "-" + month.toString();
      this.searchParam.startTime = curMonth + "-" + "01";
      this.searchParam.endTime = curMonth + "-" + strDate;
    },
    //导出
    dataExport() {
      let that = this;

      this.searchParam.ctUnitId = this.$storage.getUser().unitId;
      var param = JSON.stringify(this.searchParam);
      window.location.href =
        api.url_report_car_export + "?param=" + encodeURI(param);
    },
    //查询下拉
    getSelectList() {
      let that = this;
      //获取车辆列表

    }
  }
};
</script>

<style scoped lang='scss'>
$themeColor: #00284d;
$themeLight: #2bffff;
$fontColor: #fff;

$font32: 32px;
$black: #000000;

$containerTop: 80px;
$topHeight: 60px;
$conditionHeight: 32px; //表格上方条件的高度

@mixin inputLocation($width: 220px, $inputWidth: 180px) {
  width: $width;
  display: flex;
  align-items: center;
  justify-content: center;

  &>p {

    font-size: 13px;
    line-height: $conditionHeight;
    margin-right: 10px;
  }

  .input {

    width: $inputWidth;
  }
}

#manage {
  font-family: PingFang SC;
  position: relative;
  height: 100%;

  .condition {
    display: flex;
    width: 100%;
    align-items: center;
    margin-left:17px
  }
}

.firstInput {
  @include inputLocation(240px, 150px);
}

.secondInput {
  @include inputLocation(240px, 150px);
}

.thirdInput {
  @include inputLocation(200px, 150px);
}

.fourthInput {
  @include inputLocation(200px, 150px);
}

.searchBtn {
  float: left;
}
</style>
<style lang='scss'>

</style>
